<!--购买 弹框-->
<template>
    <section class="">
        <el-dialog
            width="590px"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            custom-class="dialog-form"
            @close="handleClose">
            <div slot="title">
                <p class="d-title">您正在购买 <span>{{shopInfo.data.shopTitle}}</span>为您提供的服务</p>
            </div>
            <div class="cp-dialog-body" style="height: 275px; overflow-y: auto">
                <el-form ref="form" label-width="80px" class="specs-form" :model="form" :rules="rules">
                    <el-form-item label="需求" prop="buyNeeds">
                        <el-input
                            v-model.trim="form.buyNeeds"
                            class="ct-wd-360"
                            type="textarea"
                            :rows="9"
                            maxlength="500"
                            show-word-limit
                            placeholder="请输入内容">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="info.supplyDemandType==='CAPABILITY_SERVICE'" :label="labelTxt" prop="buyNum">
                        <el-input-number v-model="form.buyNum" :min="1" :step-strictly="true" :step="1"></el-input-number>
                        <span>个</span>
                    </el-form-item>
                    <el-form-item v-else-if="info.supplyDemandType==='LABOR_FORCE'" :label="labelTxt" prop="hireQuantity" >
                        <el-input-number v-model="form.hireQuantity" :min="1" :step-strictly="true" :step="1"></el-input-number>
                        <span>个</span>
                    </el-form-item>
                    <el-form-item v-else :label="labelTxt" prop="leaseQuantity">
                        <el-input-number v-model="form.leaseQuantity" :min="1" :step-strictly="true" :step="1"></el-input-number>
                        <span>个</span>
                    </el-form-item>
                    <el-form-item label="金额" prop="buyAmount">
                        <el-input v-model.trim="form.buyAmount" placeholder="请输入金额">
                            <span slot="suffix" style="padding-right: 10px;">元</span>
                        </el-input>
                        <p class="tips">请提前与商家沟通确定金额，以便交易成功</p>
                    </el-form-item>
                    <el-form-item v-if="info.supplyDemandType==='CAPABILITY_SERVICE'" label="期望工期" prop="expectedDuration">
                        <el-input v-model.trim="form.expectedDuration" placeholder="请输入天数">
                            <span slot="suffix" style="padding-right: 10px;">天</span>
                        </el-input>
                    </el-form-item>
                    <template v-if="info.supplyDemandType==='LABOR_FORCE'">
                        <el-form-item label="雇佣时间" prop="time">
                            <el-date-picker
                                v-model="form.time"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                :picker-options="pickerOptions"
                                style="width: 100%;"
                                @change="dateRangChange">
                            </el-date-picker>
                        </el-form-item>
                    </template>
                    <template v-if="info.supplyDemandType==='EQUIPMENT_LEASING'">
                        <el-form-item label="租赁时间" prop="time">
                            <el-date-picker
                                v-model="form.time"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                :picker-options="pickerOptions"
                                style="width: 100%;"
                                @change="dateRangChange">
                            </el-date-picker>
                        </el-form-item>
                    </template>
                    <template v-if="info.supplyDemandType !== 'CAPABILITY_SERVICE'">
                        <el-form-item
                            prop="areaJson"
                            :label="info.supplyDemandType==='EQUIPMENT_LEASING'?'使用地点':'项目地址'" >
                            <el-cascader
                                ref="addressLabel"
                                v-model="form.areaJson"
                                :options="provinceCityData"
                                :props="cascaderProps"
                                style="width: 100%;"
                                @change="handleAreaChange">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model.trim="form.address" placeholder="请输入详细地址" maxlength="100">
                            </el-input>
                        </el-form-item>
                    </template>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :disabled="isDisabled">确定提交</el-button>
            </span>
            <div class="security">
                <div class="s-title">
                    全程保障交易安全
                </div>
                <div class="box flex flex-column flex-center">
                    <p class="cicle flex flex-center">
                        <i class="icon icon-danbao"></i>
                    </p>
                    <p class="b-title">资金担保</p>
                    <p class="b-desc">交易资金托管平台，保障资金安全，确认完成再付款</p>
                </div>
                <div class="box flex flex-column flex-center">
                    <p class="cicle flex flex-center">
                        <i class="icon icon-shiming"></i>
                    </p>
                    <p class="b-title">实名认证</p>
                    <p class="b-desc">服务商100%实 名认证，官方把关，核实身份</p>
                </div>
                <div class="box flex flex-column flex-center">
                    <p class="cicle flex flex-center">
                        <i class="icon icon-guanfang"></i>
                    </p>
                    <p class="b-title">官方介入</p>
                    <p class="b-desc">交易过程中产生纠纷，官方100%介入</p>
                </div>
            </div>
        </el-dialog>
    </section>
</template>
<script lang="ts">
import {Vue, Watch, Prop, Emit, State, Component} from 'nuxt-property-decorator'
import {demandBuy} from '~/api/demand/bidding'
import {provinceCityData} from '~/api/area'
@Component({
    name: 'dialogBuy',
    components: {}
})
export default class DialogBuy extends Vue {
    @Prop({
        default: () => {
            return {
                supplyDemandType: 'EQUIPMENT_LEASING',
                shopTitle: '设备租赁',
                id: '30'
            }
        }
    }) info!: any
    @Prop({
        default: false
    }) sDialogShow!: boolean
    validateFormNumber = (rule: any, value: any, callback: any) => {
        this.validateNumber(rule, value, callback)
    }
    validatePrice = (rule: any, value: any, callback: any) => {
        this.validatePriceNumber(rule, value, callback)
    }
    // data
    form: any = {
        buyNeeds: '',
        buyNum: '',
        buyAmount: '',
        supplyServiceId: '', // 所属服务ID
        supplyDemandType: '', // 三大类服务
        expectedDuration: '', // 期望工期
        leaseQuantity: '', // 设备租赁附加字段 租赁数量
        leaseStartTime: '', // 租赁开始时间
        leaseEndTime: '', // 租赁结束时间
        hireQuantity: '', // 劳动力附加字段 雇佣数量
        hireStartTime: '', // 雇佣开始时间
        hireEndTime: '', // 雇佣结束时间
        province: '',
        city: '',
        area: '',
        address: '',
        createUserId: '',
        location: '', // 省市区中文
        areaJson: [],
        time: ''
    }
    provinceCityData: any = provinceCityData
    cascaderProps: any = {
        value: 'id',
        label: 'label',
        children: 'children'
    }
    rules: object = {
        buyNeeds: [
            {required: true, message: '请输入需求', trigger: 'blur'}
        ],
        buyNum: [
            {required: true, message: '请输入数量', trigger: 'blur'}
        ],
        buyAmount: [
            {required: true, message: '请输入金额', trigger: 'blur'},
            {validator: this.validatePrice, trigger: 'blur'}
        ],
        expectedDuration: [
            {required: true, message: '请输入天数', trigger: 'blur'},
            {validator: this.validateFormNumber, trigger: 'blur'}
        ],
        areaJson: [
            {required: true, message: '请选择地区', trigger: 'change'}
        ],
        address: [
            {required: true, message: '请输入详细地址', trigger: 'blur'}
        ],
        time: [
            {required: true, message: '请选择时间', trigger: 'change'}
        ]
    }
    dialogVisible: boolean = false
    labelTxt: string = ''
    isDisabled: boolean = false
    pickerOptions: any = {
        disabledDate: (time: any) => time.getTime() < new Date().getTime() + 7 * 8.64e7
    }
    mounted () {
        this.initClassify()
    }
    // 省市区
    handleAreaChange (json:any) {
        const arr = (this.$refs.addressLabel as any).getCheckedNodes()
        this.form.location = JSON.stringify(arr[0].pathLabels)
        this.form.province = json[0]
        this.form.city = json[1]
        this.form.area = json[2]
    }
    dateRangChange (json:any) {
        switch (this.info.supplyDemandType) {
            case 'EQUIPMENT_LEASING':
                this.form.leaseStartTime = json[0]
                this.form.leaseEndTime = json[1]
                break
            case 'LABOR_FORCE':
                this.form.hireStartTime = json[0]
                this.form.hireEndTime = json[1]
                break
        }
    }
    initClassify () {
        switch (this.info.supplyDemandType) {
            case 'CAPABILITY_SERVICE':
                this.labelTxt = '购买数量'
                this.form.buyNum = 1
                break
            case 'EQUIPMENT_LEASING':
                this.labelTxt = '租赁数量'
                this.form.leaseQuantity = 1
                break
            case 'LABOR_FORCE':
                this.labelTxt = '雇佣人数'
                this.form.hireQuantity = 1
                break
            case 'OTHER_SERVICE':
                this.labelTxt = '其他服务'
                break
        }
    }
    handleClose () {
        this.$emit('dialogCallback', false)
    }
    handleSubmit () {
        (this.$refs.form as any).validate((valid:any) => {
            if (valid) {
                this.isDisabled = true
                const form:any = {...this.form}
                form.supplyDemandType = this.info.supplyDemandType
                form.createUserId = this.userinfo.id
                form.supplyServiceId = this.info.id
                delete form.areaJson
                delete form.time
                const submitAjax = async (fn:any) => {
                    const {data} = await fn(form)
                    if (data.code >= 0) {
                        this.$message.success(data.msg)
                        this.dialogVisible = false
                        this.handleClose()
                        this.isDisabled = false
                    } else {
                        this.$message.error(data.msg)
                    }
                }
                submitAjax(demandBuy)
            } else {
                console.log('error submit!!')
                return false
            }
        })
    }
    validateNumber (rule: any, value: any, callback: any) {
        if (isNaN(Number(value)) || Number(value) <= 0) {
            callback(new Error('请输入大于0的数字'))
        } else if (parseInt(value).toString().length > 13) {
            callback(new Error('长度不得大于13位'))
        } else {
            callback()
        }
    }
    validatePriceNumber (rule: any, value: any, callback: any) {
        if (isNaN(Number(value)) || Number(value) < 0) {
            callback(new Error('请输入大于0的数字'))
        } else {
            const field = rule.field
            const arr = field.split('.')
            const len = arr.length
            if (len === 1) {
                this.form[arr[0]] = Number(value).toFixed(2)
            } else if (len === 3) {
                this.form[arr[0]][arr[1]][arr[2]] = Number(value).toFixed(2)
            }
            callback()
        }
    }
    @Watch('sDialogShow', {immediate: true, deep: true})
    getSDialogShow (nv: boolean) {
        this.dialogVisible = nv
    }
    @State shopInfo: any
    @State userinfo: any
}
</script>
